<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>路书</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 500px;
        }

        #result {
            width: 100%
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
    <script type="text/javascript" src="//static/js/LuShu.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
<script>
    var list = {
        id: 2,
        userName: '古县2号泵组',
        no: '0002',
        point: {
            long: 112.580,   //经度
            lat: 37.800      //纬度
        },
        runPoint: [
            {
                long: 121.443532,
                lat: 31.24603
            },
            {
                long: 121.481477,
                lat: 31.240103
            },
            {
                long: 121.493262,
                lat: 31.237015
            },
            {
                long: 121.494987,
                lat: 31.230099
            },
            {
                long: 121.489382,
                lat: 31.225034
            },
            {
                long: 121.512953,
                lat: 31.219846
            },
            {
                long: 121.510222,
                lat: 31.228122
            },
            {
                long: 121.520715,
                lat: 31.232198
            },
            {
                long: 121.515828,
                lat: 31.239485
            },
            {
                long: 121.496568,
                lat: 31.227505
            },
            {
                long: 121.479177,
                lat: 31.244178
            }
        ],
        personalMarker: null,
        content: "当前任务:设备维修",
        isActive: false,
        step: '正常',
        day: 120
    };
    var map = new BMap.Map('map_canvas');
    map.enableScrollWheelZoom();
    map.centerAndZoom(new BMap.Point(112.607, 37.803), 15);
    var lushu;
    // 实例化一个驾车导航用来生成路线
    var drv = new BMap.DrivingRoute('太原', {
        onSearchComplete: function (res) {
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0);
                var arrPois = [];
                for (var j = 0; j < plan.getNumRoutes(); j++) {
                    var route = plan.getRoute(j);
                    arrPois = arrPois.concat(route.getPath());
                }
                //arrPois 获取到的亮点之间一系列详细点位 绘制线
                map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                map.setViewport(arrPois); //定位到路线位置
                luShuRender(arrPois)
            }
        }
    });

    //生成路书
    function luShuRender(arr) {
        //生成路书
        lushu = new BMapLib.LuShu(map, arr, {
            defaultContent: "",//"从天安门到百度大厦"
            autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            icon: new BMap.Icon('runUser.png', new BMap.Size(52, 26), {anchor: new BMap.Size(27, 13)}),
            speed: 4500,
            enableRotation: true,//是否设置marker随着道路的走向进行旋转
            landmarkPois: [
                {lng: 116.314782, lat: 39.913508},
                {lng: 116.315391, lat: 39.964429},
                {lng: 116.381476, lat: 39.974073},
                {lng: 116.289861, lat: 39.958972}
            ]
        });
        lushu.start();
    }

    for (var i = 0; i < list.runPoint.length; i++) {
        if (list.runPoint[i + 1]) {
            drv.search(new BMap.Point(list.runPoint[i].long, list.runPoint[i].lat), new BMap.Point(list.runPoint[i + 1].long, list.runPoint[i + 1].lat));
        }
    }
    //    drv.search('太原', '文水');
    //绑定事件
    $("run").onclick = function () {
        lushu.start();
    }
    $("stop").onclick = function () {
        lushu.stop();
    }
    $("pause").onclick = function () {
        lushu.pause();
    }
    $("hide").onclick = function () {
        lushu.hideInfoWindow();
    }
    $("show").onclick = function () {
        lushu.showInfoWindow();
    }

    function $(element) {
        return document.getElementById(element);
    }
</script>
</body>
</html>
